<template>
    <van-panel title="布局" :class="{'hide': hide}">
        <van-row v-show="setTemp.setting.banner">
            <van-col :span="4" :offset="1">
                <span>banner</span>
            </van-col>
            <van-col :span="19">
                <section>   
                    <van-stepper v-model="setTemp.setting.banner"/>
                </section>
            </van-col>
        </van-row>
        <van-row>
            <van-col :span="4" :offset="1">
                <span>选项</span>
            </van-col>
            <van-col :span="19">
                <section>   
                    <van-radio-group v-model="radio">
                        <van-radio name="margin" style="float: left; margin-right: 30px;">
                            <span>外边距</span>
                        </van-radio>
                        <van-radio name="padding" style="float: left;">
                            <span>内边距</span>
                        </van-radio>
                    </van-radio-group>
                </section>
            </van-col>
        </van-row>
        <van-row>
            <van-col :span="4" :offset="1">
                <span>上边框</span>
            </van-col>
            <van-col :span="19">
                <section>   
                    <van-stepper :min='0' v-model="setTemp.setting[radio][radio + '-top']"/>
                </section>
                <section>
                    <van-slider :min='0' v-model="setTemp.setting[radio][radio + '-top']"/>
                </section>
            </van-col>
        </van-row>
        <van-row>
            <van-col :span="4" :offset="1">
                <span>右边框</span>
            </van-col>
            <van-col :span="19">
                <section>   
                    <van-stepper :min='0' v-model="setTemp.setting[radio][radio + '-right']"/>
                </section>
                <section>
                    <van-slider :min='0' v-model="setTemp.setting[radio][radio + '-right']"/>
                </section>
            </van-col>
        </van-row>
        <van-row>
            <van-col :span="4" :offset="1">
                <span>下边框</span>
            </van-col>
            <van-col :span="19">
                <section>   
                    <van-stepper :min='0' v-model="setTemp.setting[radio][radio + '-bottom']"/>
                </section>
                <section>
                    <van-slider :min='0' v-model="setTemp.setting[radio][radio + '-bottom']"/>
                </section>
            </van-col>
        </van-row>
        <van-row>
            <van-col :span="4" :offset="1">
                <span>左边框</span>
            </van-col>
            <van-col :span="19">
                <section>   
                    <van-stepper :min='0' v-model="setTemp.setting[radio][radio + '-left']"/>
                </section>
                <section>
                    <van-slider :min='0' v-model="setTemp.setting[radio][radio + '-left']"/>
                </section>
            </van-col>
        </van-row>
        <br>
        <div slot="footer">
            <van-button size="small" @click="setClick">确定</van-button>
        </div>
    </van-panel>
</template>
<script>
export default {
    data() {
        return {
            hide: false,
            radio: 'margin',
            decide: 0
        }
    },
    props: {
        setTemp: {
            type: Object,
            default(){}
        }
    },
    watch: {
        setTemp: {
            handler(){
                if(this.decide > 0){
                    this.hide = true;
                    this.sleep(800)
                }
                this.decide ++
            },
            deep: true
        }
    },
    methods: {
        async clear(){
            this.decide = 0
        },
        sleep(time){
            return new Promise(resolve => {
                setTimeout(() => {
                    this.hide = false;
                    resolve()
                }, time);
            })
        },
        setClick(){
            if(this.setTemp.setting.banner){
                //判断banner 数量
                let num = this.setTemp.setting.banner
                let imgNum = this.setTemp.imgs.length;
                if(num > imgNum){
                    this.setTemp.imgs.push({grid: {'height': '200','width': '100'},url: '',link: {type: '',val : ''}})
                }
                if(num < imgNum){
                    let calcNum = imgNum - num;
                    for (let i = 0; i < calcNum.length; i++) {
                        this.setTemp.imgs.splice(this.setTemp.imgs.length - 1, 1);
                    }
                }
            }
            this.$emit('close')
        }
    }
}
</script>
<style lang="scss" scoped>
section{
    padding: 10px;
}
.hide{
    opacity:0.5;
}
span{
    font-size: 13px;
    line-height: 50px;
}
</style>
